<template>
	<view class="app">
		<!--header-->
		<view class="app-header-box">
			
			<view class="tabble">
				<text @click="tabbleCheck(1)" :class="switchIndex==1?'active':''">收入</text>
				<text @click="tabbleCheck(2)" :class="switchIndex==2?'active':''">支出</text>
			</view>
			<view class="pick-time">
				<view class="pick-time-detail">
					<picker mode="date" :value="date"  @change="bindDateChange" fields='month'>
					    <view class="uni-input">{{date}}</view>
					 </picker>
					<image :src="img_url+'/upstrong.png'" mode=""></image>
				</view>
				<view style="float: right;height: 85rpx;margin-right: 30rpx;" @click="reset">
					<text style="display: block;width: 100rpx;height: 60rpx;background:#FF7104;text-align: center;line-height: 60rpx;
					margin-top: 15rpx;color: #fff;border-radius: 15rpx;">重置</text>
				</view>
			</view>
		</view>
		
		<!--header-->
		<view class="items">
			<view class="item" v-for="(item, i) in dataList" :key="i">
				
				<view v-if="type_ie == 1" style="width: 100%;">
					<view style="display: flex;justify-content: space-between;align-items: center;">
						<view v-if="type == 1">下级进货订单差价收益</view>
						<view v-if="type == 2">收款到账</view>
						<view style="color: #008000;font-size: 12pt;">+{{(item.total_fee / 100).toFixed(2)}}</view>
					</view>
					
					<view class="user-data" style="padding: 0 20rpx;">
						<view style="display: flex;align-items: center;">
							<view>
								<image v-if="item.pay_user.avatar_url" :src="item.pay_user.avatar_url" mode="aspectFill" class="acatar"></image>
								<image v-else src="/static/icon/default-avatar.png" mode="aspectFill" class="acatar"></image>
							</view>
							<view class="name-datetime">
								<view class="name">
									<view class="name-text">{{item.pay_user.nickname}}</view>
									<!-- <view class="id" :style="{color: '#FF7104',border:'1px solid'+'#FF7104'}">ID:{{item.order_user.user_id}}</view> -->
								</view>
								<view class="tel">
									{{item.pay_user.mobile}}
									<span class="iconfont icon-dianhua3"></span>
								</view>
							</view>
						</view>
					
						<view v-if="type == 1" class="order-data">
							<view>实收：+￥{{item.union_record.pay_price || 0}}</view>
							<view>进货：-￥{{item.union_record.sup_pay_price || 0}}</view>
						</view>
						<view v-if="type == 2" class="order-data">
							<view>实收：+￥{{item.union_record.order_price || 0}}</view>
						</view>
					</view>
					
					<view style="text-align: right;">{{formatTimeToStr(item.created_at)}}</view>
				</view>
				
				<view v-if="type_ie == 2" style="width: 100%;">
					<view v-if="item.data_type == 'split'">
						<view style="display: flex;justify-content: space-between;align-items: center;">
							<view>订单退款，撤回收益</view>
							<view style="color: #aa0000;font-size: 12pt;">-{{(item.amount / 100).toFixed(2)}}</view>
						</view>
						
						<view class="user-data" style="padding: 0 20rpx;">
							<view style="display: flex;align-items: center;">
								<view>
									<image v-if="item.pay_user.avatar_url" :src="item.pay_user.avatar_url" mode="aspectFill" class="acatar"></image>
									<image v-else src="/static/icon/default-avatar.png" mode="aspectFill" class="acatar"></image>
								</view>
								<view class="name-datetime">
									<view class="name">
										<view class="name-text">{{item.pay_user.nickname}}</view>
										<!-- <view class="id" :style="{color: '#FF7104',border:'1px solid'+'#FF7104'}">ID:{{item.order_user.user_id}}</view> -->
									</view>
									<view class="tel">
										{{item.pay_user.mobile}}
										<span class="iconfont icon-dianhua3"></span>
									</view>
								</view>
							</view>
							<view v-if="type == 1" class="order-data">
								<view>实收：+￥{{item.union_record.pay_price || 0}}</view>
								<view>进货：-￥{{item.union_record.sup_pay_price || 0}}</view>
							</view>
							<view v-if="type == 2" class="order-data">
								<view>实收：+￥{{item.union_record.order_price || 0}}</view>
							</view>
						</view>
						
						<view style="text-align: right;">{{formatTimeToStr(item.created_at)}}</view>
					</view>
					<view v-else>
						<view style="display: flex;justify-content: space-between;align-items: center;">
							<view>{{item.body}}</view>
							<view style="color: #aa0000;font-size: 12pt;">-{{(item.amount / 100).toFixed(2)}}</view>
						</view>
						<view style="text-align: right;">{{formatTimeToStr(item.created_at)}}</view>
					</view>
					
				</view>
				
			</view>
			<main-loadmore :visible="loadding" :index="3" type="red"></main-loadmore>
			<main-nomore :visible="!pullUpOn" bgcolor="#fafafa"></main-nomore>
		</view>
		
		<view class="items" v-if='dataList.length==0'>
			<text style="display: block;width: 100%;overflow: hidden;text-align: center;font-size: 24rpx;margin-top: 50rpx;color: #999;">-----&nbsp;&nbsp;&nbsp;没有更多了&nbsp;&nbsp;&nbsp;----</text>
		</view>
	</view>
</template>

<script>
import {formatTimeToStr} from "@/utils/date";
export default {
	data() {
		return {
			type:1,
			img_url: this.$api.img_url,
			date: "全部",
			dataList: [],
			page:1,
			type_ie:1,//1收入，2支出
			textColor:'#bc0100',
			page_count:'',
			switchIndex:1,
			created_at:'',
			flag:false,
			defaultAvatar:'/static/icon/default-avatar.png',
			pullUpOn:true,
			loadding:false
		};
	},
	onLoad(opt) {
		this.type = opt.type ?? 1;
		if(uni.getStorageSync('mall_config')){
			this.textColor = this.globalSet('textCol');
		}
		this.getDateList();
		uni.showModal({
			title: '温馨提示',
			content: '当前明细列表属于旧版，仅支持查询 2024.12.23 之前的账户明细，该页面预计于2025年2月份删除。2024.12.23之后的账户明细请前往新版查看！',
			confirmText:'前往新版',
			cancelText:'我知道了',
			success: function (res) {
				if (res.confirm) {
					uni.navigateTo({
						url:'/pages/hxt/balanceLogs'
					})
				}
			}
		});
	},
	computed:{
		formatTimeToStr(){
			return value => formatTimeToStr(value * 1000)
		}
	},
	methods: {
		back() {
			this.navBack();
		},
		updateStatus(type, data) {
			return type == 1 ? `+${data}` : `-${data}`;
		},
		async getDateList() {	
			if(this.flag) return
			this.flag=true
			// self.$api.purchasing_system.getOrderSupplyChain
			let res = await this.$http.request({
				url: this.$api.hxt.hxtBalanceLogs,
				method: 'POST',
				data: {
					page:this.page,
					type_ie:this.type_ie,
					app_type:this.type,
					created_at:this.created_at,
				},
				showLoading: true,
			});
			this.flag=false
			if(res.code != 0){
				self.$http.toast(res.msg);
				return;
			}
			if(res.data.list.length==0)return false
			let list= res.data.list;
			var arr=this.dataList.concat(list)
			this.dataList =arr
			this.page_count= res.data.pagination.page_count;
		},
		tabbleCheck(index){
			this.switchIndex=index
			this.pullUpOn=true
			this.dataList=[]
			this.page=1
			this.page_count=''
			if(index==1){
				this.type_ie='1'
				this.getDateList();
			}
			if(index==2){
				this.type_ie='2'
				this.getDateList();
			}
		},
		bindDateChange: function(e) { //点击选择年月
			let time=e.target.value		
		    this.date = time.split('-')[0]+'年'+time.split('-')[1]+'月'
			this.created_at = time
			this.page=1
			this.dataList=[]
			this.getDateList()			
		},
		reset(){//重置
			this.page=1
			this.dataList=[]
			this.created_at=''
			this.date='全部'
			this.getDateList()	
		}
		
	},
	onReachBottom() {
		
		//只是测试效果，逻辑以实际数据为准
		this.loadding = true
		this.pullUpOn = true
				
		setTimeout(() => {
			this.loadding = false
			if(this.page >= this.page_count){
				this.pullUpOn = false;
				return false;
			} 	
			this.page++;
			this.getDateList();
		}, 1000)
	}
};
</script>

<style lang="scss" scoped>
	.app {
		min-height: 100%;
		background-color: #ffffff;
		color: #000000;

		.app-header-box {
			border-bottom: 4rpx solid #f7f7f7;
		}
	}

	.items {
		width: 100%;
		display: flex;
		padding: 0 10rpx;
		box-sizing: border-box;
		flex-direction: column;

		.item {
			display: flex;
			font-size: 9pt;
			padding: 10rpx 0;
			border-bottom: 1rpx solid #F7F7F9;

			.item-left {
				flex: 1;
				max-width: 70%;

				.desc {
					overflow:hidden;  
					text-overflow:ellipsis;  
					white-space: normal;  
					display:-webkit-box;  
					-webkit-box-orient:vertical;  
					-webkit-line-clamp:3;/*规定最多显示两行*/ 
					font-size: 10pt;
				}
				.date-time {
					color: #bdbdbd;
					font-size: 10pt;
				}
			}

			.item-right {
				flex: 1;
				text-align: end;
				.update {
					&.add {
						color: #bc0100;
					}
				}
				.sum {
					color: #bc0100;
				}
			}
		}
	}
	.margin-bottom {
		margin-bottom: 10rpx;
	}
	.text-10-pt {
		font-size: 10pt;
	}
	.text-12-pt {
		font-size: 12pt;
	}
	.tabble{width: 100%;height: 80rpx;display: flex;justify-content: space-evenly;}
	.tabble text{display: block;height:80rpx;line-height: 80rpx;width: 50%;text-align: center;font-weight: bold;}
	.active{background: #FF7104;color: #fff;}
	.pick-time{width: 100%;height: 95rpx;background: rgb(244,244,244);}
	.pick-time-detail{width: 300rpx;height: 60rpx;float: left;margin: 20rpx 30rpx;border-radius: 15rpx;font-weight: bold;color: #000;position: relative;}
	.pick-time-detail image{display: block;width: 36rpx;height: 36rpx;position: absolute;top: 7rpx;left: 185rpx;}

	.user-data{
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-top: 20rpx;
	}	
	.acatar {
		width: 100rpx;
		height: 100rpx;
		border-radius: 50%;
		margin-right: 16rpx;
	}
</style>

